<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1+2}}</div>
        <div>{{msg+'--------'+123}}</div>
        <!-- 文本插值表达式
        将数据填充到html标签中
        差值表达式支持基本的计算操作
        存在闪动问题 -->
    </div>
</body>
<script src="./V/vue.js"></script>
<script>
    /*
        vue.js的核心是一个允许采用简介的模板语法来声明式的将数据渲染进DOM系统

        VUE基本使用步骤
        1.需要提供标签用于填充数据
        2.引入Vue.js文件
        3.可以使用vue的语法做功能
        4.把vue的数据填充到标签里面
        Vue代码运行原理分析
        概述编译过程的概念（Vue的语法->js原生语法）由Vue的框架编译


    */
   
    var div = document.querySelector('#app')
    var vm = new Vue({ //大写V
        el: div, //元素挂载位置(值可以是CSS选择器或者DOM元素)  也可以是#app
        data: { //模型数据(值是对象)
            msg: 'HelloWorld'
        }
    })
</script>

</html>